import React from 'react'
import PropTypes from 'prop-types'
import { Row, Col } from 'antd'
import moment from 'moment'
import classnames from 'classnames'
import { acceptStatusList } from '@js/config'
import style from './Claim.module.less'

// 获取收案阶段默认显示样式
function getAcceptDefaultStatus (d, isAll) {
  const s = acceptStatusList.indexOf(d.status) !== -1 || isAll
  if (!s) {
    return { display: 'none' }
  }
}

// 格式化钱
function formatMoney (num = 0) {
  return String(num || 0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' 元'
}

// 渲染仲裁请求
function Claim ({ data = [] }) {
  const len = data.length
  return data.map((li, i) => {
    return (
      <div key={i} className={style.line}>{len > 1 ? `${i + 1}、` : ''}{formatClaimValue(li)}</div>
    )
  })
}

// 格式化请求内容
function formatClaimValue (d) {
  const { desc, type } = d
  if (type === '标的收费') {
    return `${desc || ''}（争议金额：${formatMoney(d.dispute_amount)}）`
  } else if (type !== '仲裁费') {
    return `${desc || ''}（${type || ''} | ${formatMoney(d.fee_acceptance)}）`
  } else {
    return `${desc || ''}（${type || ''}）`
  }
}

// 反请求
function ClaimBlock ({ caseDetail: d, paramKey, isAll, type }) {
  const claims = d[paramKey]
  if (!claims || claims.length === 0) {
    return null
  }
  const list = claims.filter(li => li.status === 1)
  list.sort((a, b) => a.create_datetime - b.create_datetime)
  const orderNames = classnames(style.order, { [style.anti]: paramKey === 'cclaims' })
  const titleNames = classnames(style['label-line'], paramKey === 'cclaims' ? style.vice : style.primary)
  return (
    <div style={getAcceptDefaultStatus(d, isAll)}>
      <div className={titleNames}>仲裁{type}</div>
      {list.map((li, i) => {
        return (
          <div key={li.id}>
            {list.length > 1 ? (
              <div className={style.line}>
                <span className={orderNames}>{i + 1}</span>
                {li.submittal ? <span>提出者：{li.submittal}</span> : null}
                {li.create_datetime ? <span className={style.time}>（{moment(li.create_datetime * 1000).format('YYYY-MM-DD')}）</span> : null}
              </div>
            ) : null}
            <Claim data={li.items} type={type} />
            <FeeBlock data={li} />
          </div>
        )
      })}
    </div>
  )
}

// 显示反请求争议费用
function FeeBlock ({ data, type }) {
  return (
    <Row>
      <Col span={8}>
        <span className={style.cell}>
          <span className={style['cell-label']}>{type}争议金额：</span>
          <span className={style['cell-text']}>{formatMoney(data.dispute_amount)}</span>
        </span>
      </Col>
      <Col span={8}>
        <span className={style.cell}>
          <span className={style['cell-label']}>{type}仲裁费：</span>
          <span className={style['cell-text']}>{formatMoney(data.fee)}</span>
        </span>
      </Col>
      <Col span={8}>
        <span className={style.cell}>
          <span className={style['cell-label']}>{type}受理费：</span>
          <span className={style['cell-text']}>{formatMoney(data.fee_acceptance)}</span>
        </span>
      </Col>
      <Col span={8}>
        <span className={style.cell}>
          <span className={style['cell-label']}>{type}处理费：</span>
          <span className={style['cell-text']}>{formatMoney(data.fee_processing)}</span>
        </span>
      </Col>
    </Row>
  )
}

function renderClaim (d, isAll) {
  if (!isAll) {
    return (
      <>
        <div className={style['label-line']}>仲裁请求：</div>
        <Claim data={d.claim.items} />
      </>
    )
  }
  return <ClaimBlock caseDetail={d} paramKey='claims' isAll={isAll} type='请求' />
}

function Main ({ caseDetail: d, isAll }) {
  if (!d) {
    return <span />
  }
  return (
    <div className={style.container}>
      {renderClaim(d, isAll)}
      <ClaimBlock caseDetail={d} paramKey='cclaims' isAll={isAll} type='反请求' />
    </div>
  )
}

Main.propTypes = {
  caseDetail: PropTypes.object,
  isAll: PropTypes.bool
}

Main.defaultProps = {
  caseDetail: {},
  isAll: false
}

export default Main
